import React, { useState, useEffect, useRef } from 'react';
import { Button, Form, Input, InputNumber, Card, Upload, Image, message } from 'antd';
import { UploadOutlined } from '@ant-design/icons'
import { fetchStudy, getitemDetail, studyUpdate } from '@a/nowPage'
import { useNavigate, useParams } from 'react-router-dom'
const UpdateStudy = () => {
  const navigate = useNavigate();
  // 获取修改商品详情数据
  const form = useRef();
  const routeParams = useParams();
  // 动态设置表单初始值
  const getItemDetail = () => {
    getitemDetail(routeParams).then(res => {
      if (res.data.code === 200) {
        form.current.setFieldsValue(res.data.data)
        // 设置封面的初始值
        setThumb(res.data.data.thumb)
      }
    })
  }
  // 图片上传状态改变事件
  const [thumb, setThumb] = useState('');
  const uploadStatusChange = (info) => {
    if (info.file.status === 'done') {
      setThumb(info.file.response.data.url)
    }
  }
  // 提交表单
  const onsubmitStudyForm = (params) => {
    studyUpdate(params).then(res => {
      if (res.data.code === 200) {
        message.success(res.data.msg, 2, () => {
          // 去在学学员页面
          navigate('/nowPage', { replace: true })
        })
      }
    })
  };

  const [students, setStudents] = useState([]);
  const getStudy = () => {
    fetchStudy().then(res => {
      if (res.data.code === 200) {
        const _students = res.data.data.lists;
        setStudents([
          ..._students.map(cate => {
            return {
              label: cate.cateName,
              value: cate.id
            }
          })
        ])
      }
    })
  }

  useEffect(() => {
    getStudy();
    getItemDetail();
  }, [])
  return (
    <Card title="修改学员信息" style={{ maxWidth: 900 }}>
      <Form
        name="basic"
        ref={form}
        labelCol={{
          span: 4,
        }}
        wrapperCol={{
          span: 20,
        }}
        onFinish={onsubmitStudyForm}
      >
        <Form.Item
          label="学生姓名"
          name="studyName"
          rules={[
            {
              required: true,
              message: '学生姓名必须输入!',
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="年龄"
          name="age"
          rules={[
            {
              required: true,
              message: '年龄必须输入!',
            },
          ]}
        >
          <InputNumber min={0} />
        </Form.Item>
        <Form.Item
          label="家长姓名"
          name="parentName"
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="费用"
          name="Price"
        >
          <InputNumber min={0} />
        </Form.Item>
        <Form.Item
          label="描述"
          name="desc"

        >
          <Input.TextArea />
        </Form.Item>
        <Form.Item
          label="学生头像"

        >
          <Upload
            accept='image/*'
            action="/api/upload"
            onChange={uploadStatusChange}
          >
            <Button icon={<UploadOutlined />}>点击上传</Button>
          </Upload>
          <Image src={thumb} width={80}></Image>
        </Form.Item>
        <Form.Item
          wrapperCol={{
            offset: 8,
            span: 16,
          }}
        >
          <Button type="primary" htmlType="submit">
            确定
          </Button>
        </Form.Item>
      </Form>
    </Card>
  );
};
export default UpdateStudy;
